<template>
    <div class="sensitive-list">
        <el-card shadow="hover">
            <div slot="header" class="flex jusc">
                <div class="head-title">
                    <span>敏感词列表</span>
                    <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length
                    }}个</span>
                </div>
                <div class="flex">
                    <div class="head-input">
                        <el-input v-model="searchContent" prefix-icon="el-icon-search" @keyup.enter.native="search"
                            @blur="search"></el-input>
                    </div>
                    <div class="head-btn">
                        <el-button type="primary" @click="dialogFormVisible = true" size="medium">新增</el-button>
                        <el-button type="danger" @click="updateBatch" size="medium">批量删除</el-button>
                    </div>

                    <!-- 新增敏感词 对话框 -->
                    <el-dialog title="新增敏感词" :visible.sync="dialogFormVisible" width="30%">
                        <el-form>
                            <el-form-item label="敏感词:" label-width="100px">
                                <el-input v-model="word" autocomplete="off"></el-input>
                            </el-form-item>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addSensitiveWord">新增</el-button>
                        </div>
                    </el-dialog>
                </div>

            </div>
            <div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    v-loading="isLoading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="id" width="120" align="center">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="敏感词" width="120" align="center">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column prop="admin" label="上传者" align="center">
                        <template slot-scope="scope">{{ scope.row.username }}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center">
                        <template slot-scope="scope">{{ scope.row.createTime }}</template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" align="center">
                        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                    </el-table-column>
                    <el-table-column prop="status" label="当前状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.status == 1 ? "已启用" : "已禁用" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="updateSensitive(scope.row)">修改</el-button>
                            <el-button size="mini" :type="scope.row.status == 1 ? 'warning' : 'success'"
                                @click="changStatus(scope.row)">{{ scope.row.status == 1 ? "禁用" : "启用" }}</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <!-- 修改弹出框 -->
                <el-dialog title="修改敏感词" :visible.sync="updatedialogFormVisible" width="30%">
                    <el-form>
                        <el-form-item label="敏感词:" label-width="100px">
                            <el-input v-model="updateword" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="updatedialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateSensitiveWord">修改</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="pag">
                <div class="pag">
                    <el-pagination background layout="prev, pager, next" :current-page="currPage"
                        @current-change="handleCurrentChange" :page-size="pageSize" :total=total>
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'sensitiveVue',
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            searchContent: "", // 搜索内容
            // 加载样式
            isLoading: false,
            // 分页
            currPage: 1,
            pageSize: 10,
            total: 1,

            // 新增敏感词
            dialogFormVisible: false,
            word: '',
            // 修改敏感词
            updatedialogFormVisible: false,
            updateword: '',
            // 更新的对象
            updateData: {}
        };
    },

    mounted() {
        // this.getSensitiveList()
        this.search()
    },
    methods: {

        // 新增敏感词
        addSensitiveWord() {
            this.postSensitiveWord(this.word)
            this.dialogFormVisible = false
            this.word = ''
            setTimeout(() => {
                this.search()
            }, 100)

        },
        // 新增敏感词接口函数：
        async postSensitiveWord(name) {
            let res = await this.$store.dispatch("postSensitiveWord", {
                name: name
            })
            // console.log(res);
            if (res.success) {
                this.$message.success("添加成功！")
            }
            else {
                this.$message.error("添加失败！")
            }
        },
        // 获取敏感词
        async search() {
            this.isLoading = true
            let res = await this.$store.dispatch("getSensitiveWordList", {
                pageSize: this.pageSize,
                searchContent: this.searchContent,
                currPage: this.currPage,
            });
            this.isLoading = false
            if (res.success) {
                // console.log(res.data)
                this.tableData = res.data.list
                this.total = res.data.totalCount
                // console.log(this.tableData)
            }
            else this.$global.resError(res)
        },
        // 点击修改
        updateSensitive(val) {
            this.updateData = JSON.parse(JSON.stringify(val));   //深拷贝(浅拷贝用的引用会直接影响原来数据)
            this.updateword = val.name
            this.updatedialogFormVisible = true
        },
        // 修改敏感词
        updateSensitiveWord() {
            // console.log(val.name);
            this.updateData.name = this.updateword
            this.postupdateSensitive(this.updateData)
            this.updatedialogFormVisible = false
            setTimeout(() => {
                this.search()
            }, 100)
        },
        // 修改状态
        changStatus(val) {
            this.updateData = JSON.parse(JSON.stringify(val));   //深拷贝(浅拷贝用的引用会直接影响原来数据)
            if (this.updateData.status == 1) {
                this.updateData.status = 2
            } else {
                this.updateData.status = 1
            }
            this.postupdateSensitive(this.updateData)
            setTimeout(()=>{
                this.search()
            },100)
        },
       
        async postupdateSensitive(data) {
            let res = await this.$store.dispatch("postupdateSensitive", data)
            if (!res.success) {
                this.$message.success("修改失败！")
            }else {
                this.$message.success("修改成功")
            }
        },
         // 批量删除状态
         updateBatch() {
            if (this.multipleSelection.length == 0) {
                this.$message.error("请选择需要删除的数据")
            }
            else {
                // 构造删除id数组
                let ids = []
                this.multipleSelection.forEach((item)=>{
                    ids.push(item.id)
                })
                this.postdeleteSensitiveWord(ids)
                this.multipleSelection=[]
                setTimeout(()=>{
                    this.search()
                },100)
            }

        },
        async postdeleteSensitiveWord(data){
            let res = await this.$store.dispatch("postdeleteSensitiveWord",data)
            if(res.success){
                this.$message.success("删除成功")
            }else {
                this.$message.error("删除失败")
            }
        },
        // 多选表格
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 分页跳转
        handleCurrentChange(val) {
            // console.log(`当前页为：${val}`)
            this.currPage = val
            this.search()
        },



    },
}
</script>

<style scoped>
.clearfix {
    display: flex;
    align-items: center;
}

.head-btn {
    margin: 0 10px;
}

.sensitive-list {
    background: rgb(248, 248, 248);
}

.pag {
    text-align: center;
    margin-top: 20px;
}

.head-title {
    font-size: 17px;
    font-weight: 550;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.jusc {
    justify-content: space-between;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}
</style>